/**
 * 查询所有的商品
 * @param that vue对象
 */
function queryAll(that) {
    $.ajax({
        // url : 'queryAll.do' ,   // 相对路径
        url : 'http://localhost:8080/product-sys/api/queryAll.do' ,
        type : 'get' ,
        dataType : 'json',
        success : function( responseData ) {
            that.products = [] ;
            that.products = responseData.value;
        }
    }) ;
} ;

/**
 * 删除商品
 * @param that  vue对象
 * @param id    删除商品的编号
 * @param index 删除商品的下标索引
 */
function deleteProduct(that,id,index) {

    // 创建JavaScript对象
    let formData = {
        productId : id
    }

    if (confirm("您真的要删除吗?")) {
        $.ajax({
            url : 'http://localhost:8080/product-sys/api/deleteProduct.do' ,
            type : 'DELETE' ,
            crossDomain:true,
            xhrFields: {
                withCredentials:true
            },
            // data: "productId="+id ,
            // 把JavaScript对象，转换为JSON字符串
            data : JSON.stringify(formData),
            dataType: 'json',
            contentType:"application/json;charset=utf-8",
            success : function( responseData ) {
                if(responseData.code==200) {
                    // 更新页面数据
                    that.products.splice(index, 1);
                    alert(responseData.value) ;
                    return ;
                }
                alert( responseData.msg )
            }
        }) ;
    }
} ;

/**
 * 添加商品
 * @param that vue对象
 * @param formData 表单数据
 */
function addProduct(that,formData) {
        $.ajax({
            url : 'http://localhost:8080/product-sys/api/addProduct.do' ,
            type : 'post' ,
            crossDomain:true,
            xhrFields: {
                withCredentials:true
            },
            data: formData ,
            dataType:'json',
            success : function( dto ) {
                if(dto.code==200) {
                    // 更新页面数据
                    queryAll(that) ;
                }  
            }
        }) ;
} ;

/**
 * 修改数据
 * @param that  vue对象
 * @param formData 表单数据
 */
function updateProduct(that,formData) {
    $.ajax({
        url : 'http://localhost:8080/product-sys/api/updateProduct.do' ,
        type : 'put' ,
        data: JSON.stringify(formData) ,
        success : function( dto ) {
            if(dto.code==200) {
                // 更新页面数据
                queryAll(that) ;
                alert(dto.value) ;
                return ;
            } 
            alert(dto.msg) ;
        }
    }) ;
} ;


function updateProductCount(productId,productCount) {
    let formData = {
        'productId':productId ,
        'productCount':productCount
    }
    $.ajax({
        url : 'http://localhost:8080/product-sys/api/updateProductCount.do' ,
        type : 'put' ,
        data: JSON.stringify(formData) ,
        success : function( responseData ) {
            
        }
    }) ;
} ;

// 定义全局过滤器,实现设置小数保留位数
/**
 * v : 过滤的内容
 * type: 表示货币符号，￥或$
 * n: 保留的小数位数
 */
Vue.filter('currency', function (v, type, n) {
    if (!v) {
        return type + '0'
    }
    // 过滤的具体实现....
    return type + parseFloat(v).toFixed(n);
});

let vm = new Vue({
    el: '#app',
    data: {
        products: [] ,
        currProduct:{} ,
        isAdd:true
    },
    // 生命周期：钩子函数,实现数据的初始化工作
    // 后期，使用Ajax异步请求到服务器，读取数据库中的数据
    created() {
        queryAll(this) ;
    },
    // 计算属性
    computed: {
        total() {
            let sum = 0;
            // 循环遍历products，计算
            $.each(this.products, function (i, p) {
                sum = sum + p.productPrice*1 * p.productCount*1;
            });
            return sum;
        }
    },
    // 方法 
    methods: {
        // 删除数据
        del: function (id,index) {
            deleteProduct(this,id,index)
        },
        // 编辑
        edit: function (p) {
           this.currProduct = p ;
           this.isAdd = false ;
        },
        // 清空数据
        cls : function() {
            this.currProduct = {} ;
            this.isAdd = true ;
        },
        // 保存数据（修改或添加）
        save: function() {
            // 序列化表单
            // let formData = $("#frm").serialize() ;
            let formData = {
                productId:$("#productId").val(),
                productName: $("#productName").val(),
                productPrice: $("#productPrice").val(),
                productCount: $("#productCount").val(),
                productDesc: $("#productDesc").val(),
            }

            // 判断是添加，还是修改
            if(this.isAdd) {
                // 添加操作
                addProduct(this,formData)
            } else {
                // 修改操作
                updateProduct(this,formData)
                this.currProduct = {} ;
                this.isAdd = true ;
            }
        } ,

        // 数据加1或减1
        ys : function( index, v, productId ) {
            // 页面数据改变
            this.products[index].productCount = this.products[index].productCount*1 + Number(v) ;

            // 数据库数据改变
            updateProductCount(productId,this.products[index].productCount)
        }
    }
});